<template>
  <div class="bar">
    <div class="routerView">
      <router-view></router-view>
    </div>  
    <tabbar>
      <tabbar-item selected :link="{path:'/tabbar/Home'}">
        <img slot="icon" src="../../static/img/tabbarImg/home_no.png">
        <img slot="icon-active" src="../../static/img/tabbarImg/home_on.png">
        <span slot="label">主页</span>
      </tabbar-item>
      <tabbar-item show-dot :link="{path:'/tabbar/Classify'}">
        <img slot="icon" src="../../static/img/tabbarImg/classify_no.png">
        <img slot="icon-active" src="../../static/img/tabbarImg/classify_on.png">
        <span slot="label">分类</span>
      </tabbar-item>
      <tabbar-item :link="{path:'/tabbar/Hot'}">
        <img slot="icon" src="../../static/img/tabbarImg/hot_no.png">
        <img slot="icon-active" src="../../static/img/tabbarImg/hot_on.png">
        <span slot="label">热点</span>
      </tabbar-item>
      <tabbar-item :link="{path:'/tabbar/Cart'}">
        <img slot="icon" src="../../static/img/tabbarImg/cart_no.png">
        <img slot="icon-active" src="../../static/img/tabbarImg/cart_on.png">
        <span slot="label">购物车</span>
      </tabbar-item>
      <tabbar-item badge="2" :link="{path:'/tabbar/My'}">
        <img slot="icon" src="../../static/img/tabbarImg/myself_no.png">
        <img slot="icon-active" src="../../static/img/tabbarImg/myself_on.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
  import {
    Tabbar,
    TabbarItem,
    Group,
    Cell
  } from 'vux'
  export default {
    name: 'app',
    components: {
      Tabbar,
      TabbarItem,
      Group,
      Cell
    }
  }

</script>
<style>
.routerView{
  padding-bottom: 51px;
}
</style>
